<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
	<script type="text/javascript" src="Lib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Collitions tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/img.jpg')" onmousedown="mouseDown(event)"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Moshu's collision tests</h2>
				Added a bunch of other shapes based on polygons<br />
                <ul>
                    <li>PolygonTriangle2D</li>
                    <li>PolygonRectangle2D</li>
                    <li>PolygonPentagon2D</li>
                    <li>PolygonHexagon2D</li>
                </ul>
                Added a new collision detection algorithm (actually the first real one) - SAT (Separating Axis Theorem)<br />
                This algorithm only works for now for detecting collisions between polygons
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Scene2D("c");

	    function mouseDown(ev) {
	    }

	    var pentagon = new PolygonPentagon2D(350, 100, 50);
	    pentagon.fill.enabled = true
	    pentagon.fill.color = "blue";
	    pentagon.velocity.dy = 30;
	    scene.add(pentagon);

	    var hexagon = new PolygonHexagon2D(460, 230, 50);
	    //hexagon.velocity.dy = -10;
	    hexagon.fill.enabled = true
	    hexagon.fill.color = "red";
	    scene.add(hexagon);

	    var triangle = new PolygonTriangle2D(100, 200, 100, 400, 600, 400);
	    scene.add(triangle);

	    var collisionDetector = new Polygon2DCollitionSAT(pentagon, hexagon);

	    function checkCollide(args) {
	        //var collide = collisionDetector.execute();
	        //if (collide) console.log("colliding");
	        collidingShapes = args.shape.getCollidingShapes().length;
	        if (collidingShapes > 0)
	            args.shape.fill.color = "white";
	        else args.shape.fill.color = "blue";

	    }

	    pentagon.bind("onmoving", function (args) {
	        checkCollide(args);
	        //debugger;
	        //rotatePolygon(sq, { x: 100, y: 100 },10);	        
	        rotateShape(sq, { x: 100, y: 100 }, 1);
	        return true;
	    })

	    function rotatePoint(pt, center, angleDeg)
	    {
            angleRad = (angleDeg/180)*Math.PI;
	        cosAngle = Math.cos(angleRad );
	        sinAngle = Math.sin(angleRad );
	        dx = (pt.x-center.x);
	        dy = (pt.y-center.y);

	        pt.x = center.x + dx*cosAngle-dy*sinAngle;
	        pt.y = center.y + dx*sinAngle+dy*cosAngle;
	        return pt;
	    }

	    function rotateShape(shape, point, angle) {	        
	        for (var i = 0; i < shape.points.length; i++) {
	            shape.points[i] = rotatePoint(shape.points[i], point, angle);	            
	        }
	        var collisions = shape.getCollidingShapes().length;
	        shape.fill.enabled = collisions > 0;
	        scene.invalidate();
	    }

	   
	    var sq = new PolygonRectangle2D(100, 100, 100, 100);
	    scene.add(sq);
	    //rotatePolygon(sq, { x: 150, y: 150 }, 90);

	    //rotateShape(sq, { x: 100, y: 100 }, 180);
	    
	    /*hexagon.bind("onmoving", function (args) {
	        checkCollide(args);
	        return true;
	    })*/
	    //debugger;
	    
	    //scene.invalidate();

	</script>
</body>
</html>